<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp"%>
<div class="row-fluid">
<div class="span12">
<div class="box gradient">
<div class="title">
<h4><span>Close booking day </span></h4>

<a href="#" class="minimize">Minimize</a></div>
<div class="content scrollable clearfix">
<table class="ajaxTable display table table-bordered">
	<thead>
		<tr>
			<th>Start Time</th>
			<th>End Time </th>
			<th>Facility</th>
			<th>Status</th>
			<th>Action</th>
		</tr>
	</thead>
</table>
</div>
</div>
</div>
</div>
<div>
<script type="text/javascript">

johnny.onDataLoad = function (){

	$('.close-edit').click(function (){
 		var id = $(this).attr('closeId');

 			$.ajax({
				url : "${ctx}/admin/closed-booking-day/"+id+"/edit/",
				type : "GET",
				dataType : "json",
				success : function(data){		
					if(data && data.state && (data.state.indexOf("ERROR") != -1)){
						johnny.error(data.message);
						return;
					}else{
 						$("#startTime").val(data.entity.startTime.substring(0,10));
						$("#endTime").val(data.entity.endTime.substring(0,10));
						$("#status").val(data.entity.status);
 						$("#facilityId").val(data.entity.facility.id);
						$.uniform.update("#facilityId");
						$.uniform.update("#status");
						$("#newAlbum").modal('show');
 						$("#forId").val(data.entity.id);
 					}
				}
			});

 			 
			
	});
	
}

 
var render = false;
var oTime = "";
var oTable;


$(document).ready(function () {
 	$('#newAlbum').on('hidden', function () {
	    $("#forId").val('');
		reset();
 	})
 		$("#confirmClose").click(function(){
			var url ;
 			if ($("#forId").val()){
 				url = "${ctx}/admin/closed-booking-day/"+$("#forId").val()+"/edit/"
			}else{
 				url = "${ctx}/admin/closed-booking-day/create/";
 			}

 
 			$.ajax({
				url : url,
				type : "POST",
				data : $('#closeForm').serialize(),
				dataType : "json",
				success : function(data){		
					if(data && data.state && (data.state.indexOf("ERROR") != -1)){
						johnny.error(data.message);
						return;
					}else{
					
						$("#newAlbum").modal('hide');
						updateGrid();
						johnny.info("update  successfully");
						}
				}
			});

		});












	
	 var z = 	$(".datepicker").datepicker({
			dateFormat: 'yy-mm-dd',
			showOtherMonths:true
});
	
	oTable = $('.ajaxTable').dataTable({
		"bLengthChange": true,
		"sAjaxSource": '${ctx}/admin/closed-booking-day/',
		"fnInitComplete": function (oSettings, json) { }
	});
 	
});

function reset(){

	$("#startTime").val('');
	$("#endTime").val('');
	$("#status").val('');
	$("#facilityId").val('');
	$.uniform.update("#facilityId");
	$.uniform.update("#status");
	
}

function updateGrid() {
	window.clearTimeout(oTime);
	oTime = setTimeout(function () { oTable.fnDraw(); }, 500);
}

var columnHeader = ['startTime', 'endTime', 'facility.name','status'];
var QueryData = function (aoData) {
	return johnny.initQueryData(aoData, columnHeader);
}

var DataTableForm = function (json, echo) {
	var dataArray = new Array();
	for (var i = 0; i < json.result.length; i++) {
 		var subArray = new Array();
		subArray.push(json.result[i].startTime);
		subArray.push(json.result[i].endTime);
		subArray.push(json.result[i].facility.name);
		subArray.push(json.result[i].status);
		subArray.push(actionHtml(json.result[i].id));
		

 		dataArray.push(subArray);
	}
	return {
		sEcho: echo,
		iTotalRecords: json.totalCount,
		iTotalDisplayRecords: json.totalCount,
		aaData: dataArray
	};
}			

function actionHtml(id) {
	var mainSpan = $("<span>");
	var controlDiv = $("<div>").addClass("controls center").appendTo(mainSpan);
	var href = $("<a>").attr({
		href: "#",
		closeId : id,
		title: "Edit"
	}).addClass("tip close-edit").appendTo(controlDiv);
	var span = $("<span>").addClass("icon12 icomoon-icon-pencil").appendTo(href);
	return mainSpan.html();
}
</script>

 

<a href="#newAlbum"  data-toggle="modal" class="btn btn-info"> <span
	class="icon12 icomoon-icon-plus white"></span> New</a>
	
<div id="newAlbum" class="modal hide fade" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>Close Booking day </h3>
	</div>
	<div class="modal-body">
 				<form method="post" id="closeForm">
 						<input type="hidden" id="forId">
						<div class="form-row row-fluid">
							<label class="form-label span4">Facility</label>
							
							
						<div class="span8 controls" >   
	            	
	                	<select name="facilityId" id="facilityId">
 	                        <c:if test="${not empty facilities}">
	                      	<c:forEach var="facility" items="${facilities}">
	                      		<option value="${facility.id}">${facility.name}</option>
	                      	</c:forEach>
	                    </c:if>
	               
	                </select>
				</div>
						</div>
						<div class="form-row row-fluid">
							<label class="form-label span4">Start </label>
							<input class="span8 datepicker"  name="startTime" id="startTime"  />
						</div>
						<div class="form-row row-fluid">
							<label class="form-label span4">End Time</label>
							<input class="span8 datepicker" name="endTime" id="endTime"  />
						</div>
						
							<div class="form-row row-fluid">
							<label class="form-label span4">Status</label>
										<div class="span8 controls" >   
	            	
	                	<select name="status" id="status">
 	                      		<option value="active">Active</option>
 	              				 <option value="disable">Disable</option>
		                </select>
				</div>
						</div>
				</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" id ="confirmClose" class="btn btn-primary">Save changes</a>
	</div>
</div>	
	
	
	
</div>
